<template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <!-- 子目录 -->
    <el-sub-menu v-if="subItem.children?.length" :class="['sub-menu-' + menuMode]" :index="subItem.path">
      <template #title>
        <i v-if="subItem.meta.icon && isMenuIcon" class="menu-item-icon" :class="subItem.meta.icon"></i>
        <i v-else-if="isMenuCollapse && !subItem.parentName">{{ subItem.meta.title[0] }}</i>
        <span class="menu-item-title">{{ subItem.meta.title }}</span>
      </template>
      <SubMenu :menu-list="subItem.children" />
    </el-sub-menu>
    <!-- 子菜单 -->
    <el-menu-item v-else :class="['menu-item-' + menuMode]" :index="subItem.path" @click="tapMenu(subItem)">
      <i v-if="subItem.meta.icon && isMenuIcon" class="menu-item-icon" :class="subItem.meta.icon"></i>
      <i v-else-if="isMenuCollapse && !subItem.parentName">{{ subItem.meta.title[0] }}</i>
      <template #title>
        <span class="menu-item-title">{{ subItem.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
import { useThemeStore } from '@/stores/theme'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  menuList: {
    type: Array,
    default: () => [],
  },
})

const themeStore = useThemeStore()
const { menuMode, isMenuIcon, isMenuCollapse } = storeToRefs(themeStore)

function tapMenu(subItem) {
  if (subItem.meta.link) {
    return window.open(subItem.meta.isLink, '_blank')
  }
  if (subItem.meta.blank) {
    const isHash = import.meta.env.VITE_APP_ROUTER_MODE == 'hash'
    const href_blank = (isHash ? '#' : '') + subItem.path // hash模式需要加#前缀
    return window.open(href_blank, '_blank')
  }
  router.push(subItem.path)
}
</script>

<style lang="scss" scoped>
.menu-item-title {
  font-size: 14px;
}

.menu-item-icon {
  font-size: 16px;
  margin-right: 10px;
}
</style>
